<template>
  <view class="container">
    <!-- 描述选项 -->
    <view class="condition-wapper">
      <view class="desc-item">
        <view class="label">描述内容主题:</view>
        <view class="content">这里是内容描述</view>
      </view>
      <view class="desc-item">
        <view class="label">脚本角色设定:</view>
        <view class="content">这里是内容描述</view>
      </view>
      <view class="desc-item">
        <view class="label">类型:</view>
        <view class="content">短视频</view>
      </view>
      <view class="desc-item">
        <view class="label">字数:</view>
        <view class="content">300字</view>
      </view>
    </view>
    <view class="ai-resule">
      <view class="header">
        <text class="title">生成结果</text>
        <view class="op-btn">
          <uni-icons fontFamily="CustomFont" :size="18" color="#BFC6CA">{{'\ue687'}}</uni-icons><text>复制</text>
        </view>
      </view>
      <view class="ai-content">
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
        这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容这里是生成的内容
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

</script>

<style lang="scss" scoped>
/* 自定义icon */
@font-face {
	font-family: CustomFont;
	src: url('../../static/iconfont.ttf');
}
.container {
  padding: 20px;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  /* background: #fafcff; */
  background: linear-gradient(to bottom, #C4DCFA, #f0f0f0);
}
.condition-wapper {
  background:white;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1);
  padding: 30rpx 20rpx;
  max-height: 50vh;
  .desc-item {
    .label {
      display: inline-block;
      margin: 15rpx 0rpx;
      font-weight: bold;
      font-size: 28rpx;
    }
    .content {
      font-size: 28rpx;
      color:#78858c;
      padding-left: 20rpx;
    }
  }
}
.ai-resule {
  position: relative;
  background:white;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1);
  padding: 30rpx 20rpx;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      display: inline-block;
      margin: 15rpx 0rpx;
      font-weight: bold;
      font-size: 28rpx;
    }
    .op-btn {
      font-size: 28rpx;
			color: #BFC6CA;
    }
  }
  .ai-content {
    max-height: 50vh;
    font-size: 28rpx;
    color:#78858c;
    overflow: auto;
    padding-left: 20rpx;
  }
}
</style>
